﻿@{
    ViewBag.Title = Resources.AdminSite;
    Layout = "~/Areas/Admin/Views/Shared/_AdminLayout.cshtml";
}
<div class="clearfix">
    <table id="albumList" class="scroll" cellpadding="0" cellspacing="0">
    </table>
    <div id="albumPager" class="scroll" style="text-align: center;">
    </div>
</div>
<script type="text/javascript">
    var lastsel3;
    var editImageUrl = '@Url.Content("~/Content/images/ico-edit.gif")';
    var deleteImageUrl = '@Url.Content("~/Content/images/ico-delete.gif")';
    var createUrl = '@Url.Content("~/Admin/Album/Create/")';
    var updateUrl = '@Url.Content("~/Admin/Album/Update/")';
    var deleteUrl = '@Url.Content("~/Admin/Album/Delete/")';
    var getdataUrl = '@Url.Content("~/Admin/Album/GetGridData/")';
    var uploadImageUrl = '@Url.Content("~/Admin/Album/Upload/")';


    Sys.require(["jqGrid", "colorbox", "jqUI"],
      function () {
          var grid = $("#albumList").jqGrid({
              url: getdataUrl,
              datatype: 'json',
              mtype: 'GET',
              width: 910,
              height: 330,
              colNames: ['@Resources.AlbumGridID', '@Resources.AlbumGridName', '@Resources.AlbumGridSinger', '@Resources.AlbumGridCategory', '@Resources.AlbumGridLanguage', '@Resources.AlbumGridReleaseDate', '@Resources.AlbumGridCover', '@Resources.GridEditHeader', '@Resources.GridDeleteHeader'],
              colModel: [
                  { name: 'ID', index: 'ID', width: 30, align: 'center', editable: false },
                  { name: 'Name', index: 'Name', width: 120, align: 'center', editable: true },
                  { name: 'Singer', index: 'Singer', width: 120, align: 'center', editable: true },
                  { name: 'Category', index: 'Category', width: 100, align: 'center', editable: true, stype: 'select', edittype: "select" },
                  { name: 'Language', index: 'Language', width: 80, align: 'center', editable: true, stype: 'select', edittype: "select" },
                  { name: 'PublishDate', index: 'PublishDate', width: 90, align: 'center', editable: true, sorttype: "date" },
                  { name: 'Cover', width: 40, align: 'center', editable: false, formatter: imageFormatter, stype: 'null' },
                  { name: 'EditColumn', index: 'Edit', width: 40, align: 'center', editable: false, stype: 'null' },
                  { name: 'DeleteColumn', index: 'Delete', width: 40, align: 'center', editable: false, stype: 'null'}],
              pager: '#albumPager',
              rowNum: 10,
              rowList: [10, 20],
              viewrecords: true,
              jsonReader: {
                  root: "Rows",
                  page: "PageIndex",
                  total: "TotalPages",
                  records: "TotalCount",
                  repeatitems: false,
                  userdata: "UserData",
                  id: "ID"
              },
              multiselect: false,
              loadComplete: function () {
                  var grid = $('#albumList');
                  {
                      afterLoadComplete.call
                    (grid, updateUrl, "EditColumn", editImageUrl, 'afterClickEditForAlbum', '@Resources.EditAlbumTitle');
                  }
                  {
                      afterLoadComplete.call
                    (grid, deleteUrl, "DeleteColumn", deleteImageUrl, 'afterClickDelete', '@Resources.DeleteAlbumTitle');
                  }
                  {
                      var cm = grid.jqGrid('getColProp', 'Category');
                      cm.editoptions = { value: grid.jqGrid('getGridParam', 'userData').CategoryOptions };

                      cm = grid.jqGrid('getColProp', 'Language');
                      cm.editoptions = { value: grid.jqGrid('getGridParam', 'userData').LanguageOptions }
                  }

                  InitCoverModals();
              }
          })
        .navGrid('#albumPager', { edit: false, add: true, del: false, search: false }, {},
          {
              reloadAfterSubmit: true,
              url: createUrl,
              addCaption: '@Resources.AddAlbumTitle',
              modal: true,
              closeAfterAdd: true,
              afterSubmit: processErrorAfterSubmit,
              beforeShowForm: function () { $("#PublishDate").datepicker(); }
          });
      });

      function afterClickEditForAlbum(gridId, rowId, posturl, caption) {
          if (!!gridId) {

              $(gridId).editGridRow(rowId, {
                  reloadAfterSubmit: true,
                  url: posturl,
                  editCaption: caption,
                  modal: true,
                  closeAfterEdit: true,
                  afterSubmit: processErrorAfterSubmit,
                  beforeShowForm: function () { $("#PublishDate").datepicker(); }
              });
          }
          else
              alert("Please Select Row");
      }

      function imageFormatter(cellvalue, options, rowObject) {
          var url = uploadImageUrl + "?albumID=" + rowObject.ID;
          return "<a class='cover-upload' href='" + url + "'><img class='img-grid' src='../../../../Content/styles/album/images/hover.png' /></a>";
      }

      function InitCoverModals() {
          $('.cover-upload').each(function () {
              $(this).colorbox({ iframe: true, width: "600px", height: "500px" });
          })
      }

</script>
